<template>
  <div class="welcome-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="nav-container">
        <div class="logo">
          <h1>智慧养老中心</h1>
          <p>让关爱温暖每一个黄昏</p>
        </div>
        <nav class="nav-menu">
          <a @click="scrollToSection('home')" class="nav-item active">首页</a>
          <a @click="scrollToSection('guide')" class="nav-item">入院指南</a>
          <a @click="scrollToSection('notice')" class="nav-item">系统公告</a>
        </nav>
        <div class="login-section">
          <el-button type="primary" @click="goToLogin" class="login-btn">
            登录系统
          </el-button>
        </div>
      </div>
    </header>

    <!-- 轮播图区域 -->
    <section class="carousel-section" id="home">
      <div class="carousel-container">
        <div 
          v-for="(slide, index) in slides" 
          :key="index"
          :class="['carousel-slide', { active: currentSlide === index }]"
        >
          <div class="slide-content">
            <div class="text-content">
              <h2>{{ slide.title }}</h2>
              <p>{{ slide.description }}</p>
              <div class="features">
                <div 
                  v-for="(feature, featureIndex) in slide.features" 
                  :key="featureIndex"
                  class="feature-item"
                >
                  <span class="icon">{{ feature.icon }}</span>
                  <span>{{ feature.text }}</span>
                </div>
              </div>
            </div>
            <div class="image-placeholder">
              <div :class="slide.imageClass">
                <div :class="slide.contentClass">
                  <div 
                    v-for="(element, elementIndex) in slide.elements" 
                    :key="elementIndex"
                    :class="element"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="carousel-controls">
          <button class="control-btn prev" @click="prevSlide">‹</button>
          <button class="control-btn next" @click="nextSlide">›</button>
        </div>
        
        <div class="carousel-indicators">
          <span 
            v-for="(slide, index) in slides" 
            :key="index"
            :class="['indicator', { active: currentSlide === index }]"
            @click="goToSlide(index)"
          ></span>
        </div>
      </div>
    </section>

    <!-- 入院指南区域 -->
    <section class="guide-section" id="guide">
      <div class="section-container">
        <h2 class="section-title">入院指南</h2>
        <div class="guide-steps">
          <div class="step-card" @click="showConsultDetail">
            <div class="step-number">01</div>
            <h3>咨询了解</h3>
            <p>通过电话或现场咨询了解我们的服务内容、收费标准及相关政策</p>
            <div class="step-action">
              <el-button type="primary" size="small" @click.stop="showConsultDetail">详细咨询</el-button>
            </div>
          </div>
          <div class="step-card" @click="showHealthAssessment">
            <div class="step-number">02</div>
            <h3>健康评估</h3>
            <p>专业医护人员对长者进行全面的健康评估，制定个性化照护计划</p>
            <div class="step-action">
              <el-button type="primary" size="small" @click.stop="showHealthAssessment">了解详情</el-button>
            </div>
          </div>
          <div class="step-card" @click="showAgreementSign">
            <div class="step-number">03</div>
            <h3>签订协议</h3>
            <p>确认服务内容后，签订入住协议，办理相关手续</p>
            <div class="step-action">
              <el-button type="primary" size="small" @click.stop="showAgreementSign">签订协议</el-button>
            </div>
          </div>
          <div class="step-card" @click="showSettleIn">
            <div class="step-number">04</div>
            <h3>安心入住</h3>
            <p>安排舒适房间，开始享受专业的养老服务和温馨的社区生活</p>
            <div class="step-action">
              <el-button type="primary" size="small" @click.stop="showSettleIn">入住指南</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 系统公告区域 -->
    <section class="notice-section" id="notice">
      <div class="section-container">
        <h2 class="section-title">系统公告</h2>
        <div class="notice-list">
          <div 
            v-for="announcement in announcements" 
            :key="announcement.id"
            class="notice-item"
            @click="showAnnouncementDetail(announcement)"
          >
            <div class="notice-date">{{ announcement.date }}</div>
            <h3>{{ announcement.title }}</h3>
            <p>{{ announcement.content }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-info">
          <h3>智慧养老中心</h3>
          <p>地址：XX市XX区XX路XX号</p>
          <p>电话：400-123-4567</p>
          <p>邮箱：contact@smarteldercare.com</p>
        </div>
        <div class="footer-links">
          <a href="#home">首页</a>
          <a href="#guide">入院指南</a>
          <a href="#notice">系统公告</a>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 智慧养老中心 版权所有</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox, ElMessage } from 'element-plus'

const router = useRouter()
const currentSlide = ref(0)
let autoSlideInterval

// 轮播图数据
const slides = reactive([
  {
    title: "智慧养老，温暖相伴",
    description: "我们致力于为长者提供专业、贴心的养老服务，让每一位老人都能安享幸福晚年。",
    features: [
      { icon: "🏠", text: "舒适居住" },
      { icon: "👨‍⚕️", text: "专业护理" },
      { icon: "🍲", text: "营养膳食" }
    ],
    imageClass: "warm-image",
    contentClass: "warm-content",
    elements: ["sun", "house", "tree", "person"]
  },
  {
    title: "科技赋能，健康守护",
    description: "运用先进技术实现24小时健康监测，为长者提供全方位的安全保障。",
    features: [
      { icon: "📱", text: "智能监测" },
      { icon: "💓", text: "健康管理" },
      { icon: "🔔", text: "紧急响应" }
    ],
    imageClass: "tech-image",
    contentClass: "tech-content",
    elements: ["heartbeat", "data-chart", "notification"]
  },
  {
    title: "专业团队，用心服务",
    description: "经验丰富的护理团队，为长者提供个性化、专业化的照护服务。",
    features: [
      { icon: "👥", text: "专业团队" },
      { icon: "❤️", text: "用心服务" },
      { icon: "⭐", text: "五星标准" }
    ],
    imageClass: "team-image",
    contentClass: "team-content",
    elements: ["team-group", "heart-care", "star-quality"]
  }
])

// 系统公告数据
const announcements = reactive([
  {
    id: 1,
    date: '2024-12-01',
    title: '冬季健康关怀活动启动',
    content: '为应对冬季气候变化，我们将开展系列健康关怀活动，包括健康讲座、体检服务等。',
    image: '/announcements/winter_health.jpg'
  },
  {
    id: 2,
    date: '2024-11-20',
    title: '家属开放日通知',
    content: '每月第三个周六为家属开放日，欢迎家属前来探望长者，共同参与活动。',
    image: '/announcements/family_day.jpg'
  },
  {
    id: 3,
    date: '2024-11-15',
    title: '系统维护通知',
    content: '为提升服务质量，系统将于本周六凌晨2:00-4:00进行维护，期间部分功能可能无法使用。',
    image: '/announcements/system_maintenance.jpg'
  },
  {
    id: 4,
    date: '2024-11-10',
    title: '新护工培训完成',
    content: '欢迎新一批专业护工加入我们的团队，他们已完成专业培训，将为长者提供更优质的服务。',
    image: '/announcements/new_caregivers.jpg'
  },
  {
    id: 5,
    date: '2024-11-05',
    title: '秋季健康讲座安排',
    content: '本周六下午2点在活动室举办秋季健康养生讲座，欢迎各位老人及家属参加。',
    image: '/announcements/health_lecture.jpg'
  }
])

const goToLogin = () => {
  router.push('/login')
}

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % 3
}

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + 3) % 3
}

const goToSlide = (index) => {
  currentSlide.value = index
}

const scrollToSection = (sectionId) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

// 查看公告详情
const showAnnouncementDetail = (announcement) => {
  ElMessageBox.alert(
    `<div style="text-align: left;">
      <h3 style="color: #3498db; margin-bottom: 15px;">${announcement.title}</h3>
      <p style="color: #7f8c8d; margin-bottom: 15px;"><strong>发布时间：</strong>${announcement.date}</p>
      <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 15px;">
        <p style="line-height: 1.6; margin: 0;">${announcement.content}</p>
      </div>
      <div style="margin-top: 20px; padding: 15px; background: #e8f4fd; border-radius: 8px;">
        <p style="margin: 0; color: #3498db; font-weight: bold;">
          📞 咨询电话：400-123-4567<br>
          📍 地址：天津市西青区XX街道XX号
        </p>
      </div>
    </div>`,
    '公告详情',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭',
      customClass: 'announcement-detail-dialog',
      center: true
    }
  )
}

// 入院指南功能方法
const showConsultDetail = () => {
  ElMessageBox.alert(
    `<div style="text-align: left;">
      <h3 style="color: #3498db; margin-bottom: 15px;">咨询了解详情</h3>
      <p><strong>服务内容：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>24小时专业护理服务</li>
        <li>个性化健康管理方案</li>
        <li>营养膳食定制服务</li>
        <li>康复训练指导</li>
        <li>文化娱乐活动</li>
      </ul>
      <p><strong>收费标准：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>单人间：¥5000-8000/月</li>
        <li>双人间：¥3500-5500/月</li>
        <li>三人间：¥2500-4000/月</li>
        <li>特殊护理：根据需求另行收费</li>
      </ul>
      <p><strong>相关政策：</strong></p>
      <ul style="margin-left: 20px;">
        <li>医保定点机构</li>
        <li>长期护理保险支持</li>
        <li>政府补贴政策适用</li>
      </ul>
      <p style="margin-top: 20px; color: #e74c3c; font-weight: bold;">
        咨询电话：400-123-4567<br>
        地址：XX市XX区XX路XX号
      </p>
    </div>`,
    '咨询了解详情',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭',
      customClass: 'consult-detail-dialog'
    }
  )
}

const showHealthAssessment = () => {
  ElMessageBox.alert(
    `<div style="text-align: left;">
      <h3 style="color: #3498db; margin-bottom: 15px;">健康评估详情</h3>
      <p><strong>评估内容：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>基础生命体征检测（血压、心率、体温）</li>
        <li>认知功能评估（MMSE量表）</li>
        <li>日常生活能力评估（ADL量表）</li>
        <li>营养状况评估</li>
        <li>慢性病风险评估</li>
        <li>心理健康评估</li>
      </ul>
      <p><strong>评估流程：</strong></p>
      <ol style="margin-left: 20px; margin-bottom: 15px;">
        <li>预约评估时间</li>
        <li>专业医护人员上门评估</li>
        <li>综合评估报告生成</li>
        <li>个性化照护计划制定</li>
        <li>家属沟通确认</li>
      </ol>
      <p><strong>评估结果：</strong></p>
      <ul style="margin-left: 20px;">
        <li>详细健康报告</li>
        <li>个性化照护建议</li>
        <li>饮食营养指导</li>
        <li>康复训练方案</li>
        <li>定期复查计划</li>
      </ul>
      <p style="margin-top: 20px; color: #27ae60; font-weight: bold;">
        评估时间：约1-2小时<br>
        评估费用：免费（首次）
      </p>
    </div>`,
    '健康评估详情',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '关闭',
      customClass: 'health-assessment-dialog'
    }
  )
}

const showAgreementSign = () => {
  ElMessageBox.confirm(
    `<div style="text-align: left;">
      <h3 style="color: #3498db; margin-bottom: 15px;">签订协议</h3>
      <p><strong>协议内容：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>入住服务协议</li>
        <li>费用结算协议</li>
        <li>医疗护理协议</li>
        <li>安全责任协议</li>
        <li>隐私保护协议</li>
      </ul>
      <p><strong>需要准备的材料：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>长者身份证原件及复印件</li>
        <li>家属身份证原件及复印件</li>
        <li>近期体检报告</li>
        <li>医保卡复印件</li>
        <li>紧急联系人信息</li>
      </ul>
      <p><strong>签订流程：</strong></p>
      <ol style="margin-left: 20px;">
        <li>材料审核</li>
        <li>协议内容确认</li>
        <li>费用结算</li>
        <li>协议签订</li>
        <li>入住安排</li>
      </ol>
      <p style="margin-top: 20px; color: #e67e22; font-weight: bold;">
        提示：请仔细阅读协议条款，如有疑问请及时咨询工作人员
      </p>
    </div>`,
    '签订协议',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认签订',
      cancelButtonText: '取消',
      customClass: 'agreement-sign-dialog',
      type: 'warning'
    }
  ).then(() => {
    ElMessage.success('协议签订成功！系统将为您自动注册家属账号')
    // 这里可以添加自动注册家属账号的逻辑
  }).catch(() => {
    ElMessage.info('已取消签订')
  })
}

const showSettleIn = () => {
  ElMessageBox.alert(
    `<div style="text-align: left;">
      <h3 style="color: #3498db; margin-bottom: 15px;">安心入住指南</h3>
      <p><strong>入住准备：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>个人洗漱用品</li>
        <li>换洗衣物（建议准备7-10套）</li>
        <li>常用药品及用药说明</li>
        <li>个人喜好物品（照片、书籍等）</li>
        <li>助行器、轮椅等辅助设备</li>
      </ul>
      <p><strong>房间设施：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>舒适床铺（可调节高度）</li>
        <li>独立卫生间（无障碍设计）</li>
        <li>空调、电视、WiFi</li>
        <li>紧急呼叫系统</li>
        <li>储物柜、床头柜</li>
      </ul>
      <p><strong>服务内容：</strong></p>
      <ul style="margin-left: 20px; margin-bottom: 15px;">
        <li>每日健康监测</li>
        <li>营养三餐供应</li>
        <li>房间清洁服务</li>
        <li>衣物清洗服务</li>
        <li>24小时护理服务</li>
        <li>康复训练指导</li>
        <li>文化娱乐活动</li>
      </ul>
      <p><strong>注意事项：</strong></p>
      <ul style="margin-left: 20px;">
        <li>贵重物品请妥善保管</li>
        <li>遵守养老院规章制度</li>
        <li>外出需提前申请</li>
        <li>按时参加集体活动</li>
        <li>保持房间整洁卫生</li>
      </ul>
      <p style="margin-top: 20px; color: #9b59b6; font-weight: bold;">
        祝您入住愉快！如有任何问题，请随时联系工作人员
      </p>
    </div>`,
    '安心入住指南',
    {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确认',
      customClass: 'settle-in-dialog'
    }
  )
}

onMounted(() => {
  // 自动轮播
  autoSlideInterval = setInterval(nextSlide, 5000)
})

// 清理定时器
onUnmounted(() => {
  if (autoSlideInterval) {
    clearInterval(autoSlideInterval)
  }
})
</script>

<style scoped>
.welcome-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 头部样式 */
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo h1 {
  color: #2c3e50;
  margin: 0;
  font-size: 24px;
  font-weight: bold;
}

.logo p {
  color: #7f8c8d;
  margin: 0;
  font-size: 12px;
}

.nav-menu {
  display: flex;
  gap: 40px;
}

.nav-item {
  color: #2c3e50;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 0;
  position: relative;
  transition: color 0.3s ease;
}

.nav-item:hover,
.nav-item.active {
  color: #3498db;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3498db;
}

.login-btn {
  background: linear-gradient(135deg, #3498db, #2980b9);
  border: none;
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

/* 轮播图样式 */
.carousel-section {
  padding-top: 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.carousel-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

.carousel-slide {
  display: none;
}

.carousel-slide.active {
  display: block;
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.text-content h2 {
  font-size: 3rem;
  color: #2c3e50;
  margin-bottom: 20px;
  line-height: 1.2;
}

.text-content p {
  font-size: 1.2rem;
  color: #7f8c8d;
  margin-bottom: 30px;
  line-height: 1.6;
}

.features {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.feature-item .icon {
  font-size: 2rem;
  margin-bottom: 10px;
}

.feature-item span:last-child {
  font-size: 0.9rem;
  color: #7f8c8d;
}

/* 图片占位符样式 */
.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
}

.warm-image, .tech-image {
  width: 400px;
  height: 300px;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 温暖图片的CSS绘制元素 */
.sun {
  position: absolute;
  top: 40px;
  right: 60px;
  width: 80px;
  height: 80px;
  background: #ffd700;
  border-radius: 50%;
  box-shadow: 0 0 30px #ffd700;
}

.house {
  position: absolute;
  bottom: 60px;
  left: 80px;
  width: 120px;
  height: 100px;
  background: #e74c3c;
  border-radius: 10px 10px 0 0;
}

.house::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -10px;
  width: 140px;
  height: 40px;
  background: #c0392b;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree {
  position: absolute;
  bottom: 60px;
  right: 100px;
  width: 20px;
  height: 60px;
  background: #8b4513;
}

.tree::before {
  content: '';
  position: absolute;
  top: -40px;
  left: -30px;
  width: 80px;
  height: 80px;
  background: #27ae60;
  border-radius: 50%;
}

.person {
  position: absolute;
  bottom: 60px;
  left: 220px;
  width: 30px;
  height: 50px;
  background: #3498db;
  border-radius: 15px 15px 0 0;
}

/* 科技图片的CSS绘制元素 */
.tech-image {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.heartbeat {
  position: absolute;
  top: 80px;
  left: 60px;
  width: 120px;
  height: 60px;
  border: 3px solid #e74c3c;
  border-radius: 30px;
}

.heartbeat::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 20px;
  width: 80px;
  height: 80px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 50%;
}

.data-chart {
  position: absolute;
  bottom: 80px;
  left: 200px;
  width: 120px;
  height: 80px;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 19px,
    #3498db 19px,
    #3498db 20px
  );
}

.notification {
  position: absolute;
  top: 120px;
  right: 80px;
  width: 60px;
  height: 60px;
  background: #9b59b6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

/* 团队图片的CSS绘制元素 */
.team-image {
  width: 400px;
  height: 300px;
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.team-group {
  position: absolute;
  bottom: 60px;
  left: 100px;
  width: 200px;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.team-group::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 60px;
  background: #3498db;
  border-radius: 20px 20px 0 0;
  left: 0;
}

.team-group::after {
  content: '';
  position: absolute;
  width: 40px;
  height: 70px;
  background: #e74c3c;
  border-radius: 20px 20px 0 0;
  left: 60px;
}

.team-group .person {
  position: absolute;
  width: 40px;
  height: 65px;
  background: #9b59b6;
  border-radius: 20px 20px 0 0;
  left: 120px;
}

.heart-care {
  position: absolute;
  top: 80px;
  right: 100px;
  width: 60px;
  height: 60px;
  background: #e74c3c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.heart-care::before {
  content: '❤️';
  font-size: 1.2rem;
}

.star-quality {
  position: absolute;
  top: 160px;
  right: 80px;
  width: 40px;
  height: 40px;
  background: #f1c40f;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: twinkle 2s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

/* 轮播控制 */
.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.control-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  pointer-events: all;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.control-btn:hover {
  background: white;
  transform: scale(1.1);
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #bdc3c7;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #3498db;
  transform: scale(1.2);
}

/* 其他区域样式 */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 20px;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 50px;
}

.guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.step-card {
  background: white;
  padding: 40px 30px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.step-card:hover {
  transform: translateY(-10px);
}

.step-number {
  font-size: 3rem;
  font-weight: bold;
  color: #3498db;
  margin-bottom: 20px;
}

.step-card h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.3rem;
}

.step-card p {
  color: #7f8c8d;
  line-height: 1.6;
}

/* 公告列表样式 */
.notice-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notice-item {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.notice-item:hover {
  transform: translateY(-5px);
}

.notice-date {
  color: #3498db;
  font-weight: bold;
  margin-bottom: 10px;
}

.notice-item h3 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.notice-item p {
  color: #7f8c8d;
  line-height: 1.6;
}

/* 页脚样式 */
.footer {
  background: #2c3e50;
  color: white;
  padding: 40px 0 20px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-info h3 {
  margin-bottom: 15px;
  font-size: 1.5rem;
}

.footer-info p {
  margin: 5px 0;
  color: #bdc3c7;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: #bdc3c7;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: white;
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 0;
  border-top: 1px solid #34495e;
  text-align: center;
  color: #bdc3c7;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    height: auto;
    padding: 15px 20px;
  }
  
  .nav-menu {
    margin: 15px 0;
    gap: 20px;
  }
  
  .slide-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .text-content h2 {
    font-size: 2rem;
  }
  
  .features {
    flex-direction: column;
    gap: 20px;
  }
  
  .warm-image, .tech-image {
    width: 300px;
    height: 200px;
  }
  
  .guide-steps {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 30px;
  }
}
</style>
